<!--
 * @Author: Mcc
 * @Date: 2024-07-10 10:05:02
 * @LastEditors: mcc 550539422@qq.com
 * @LastEditTime: 2024-08-22 11:07:56
 * @FilePath: \ft-apply\src\components\Header.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by Mcc, All Rights Reserved. 
-->
<template>
  <div id="header" :class="$route.meta.bgwhite ? 'bgWhite' : ''">
    <div class="logo" @click="goIndex()">
      <img v-if="!$route.meta.bgwhite" src="../assets/ui/img/logo.png" alt="" srcset="" />
      <img v-else src="../assets/img/logo.png" alt="" srcset="" />
    </div>
    <div>
      <span style="margin-right: 10px;" v-if="$route.name != 'share'" class="iconfont icon-fenxiang"
        @click='goShare'></span>
      <van-popover v-model:show="showPopover" @open="getUserInfo" @select="onSelect" placement="bottom-end">
        <van-sidebar style=" width: 100%">
          <van-sidebar-item @click="
            gotoJoin(item);
          showPopup = false;
          " :title="item.title" v-for="item in routes" v-show="item?.meta?.showInLeft" :key="item.title">
          </van-sidebar-item>
          <van-sidebar-item title="个人中心" @click="toUserCenter">
          </van-sidebar-item>
        </van-sidebar>
        <template #reference>
          <span class="iconfont icon-caidan" v-if='!showPopover'></span>
          <span class="iconfont icon-guanbi" v-else='showPopover'></span>
        </template>
      </van-popover>
    </div>
  </div>
  <user-center @closePop="showUserCenter = false" :showUserCenter="showUserCenter"></user-center>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { routes } from '../router/index';
import UserCenter from '../view/UserCenter.vue';
import { showToast } from 'vant';

import apis from '../api/index';
const { userIndexStatus } = apis;
const showPopup = ref<boolean>(false);
const showUserCenter = ref<boolean>(false);

const router = useRouter();
//const active = ref<string | number>(0);

const showPopover = ref(false);
const onSelect = () => {
  showPopover.value = !showPopover.value;
}
const getUserInfo = async () => {
  const userData = JSON.parse(localStorage.getItem("userInfo") as string);
  if (userData != null) {
    const response = await userIndexStatus({ userId: userData.userId });
    localStorage.setItem("clickStatus", JSON.stringify(response.data));
  } else {
    console.log('用户信息为空')
  }
}
const goShare = () => {
  //showPopover.value = false;
  router.push('/share')
}
const goIndex = () => {
  router.push('/')
}
const gotoJoin = (item) => {
  const userData = JSON.parse(localStorage.getItem("userInfo") as string);
  showPopover.value = !showPopover.value;
  if (item.title == '首页') {
    router.push('/')
    return;
  } else {
    if (userData != null) {
      const clickStatus = JSON.parse(localStorage.getItem('clickStatus'));
      if (clickStatus.resumesStatus == 0) {
        //跳到投递简历页面
        router.push("/Join")
      } else {
        //showToast('等待通过！');
        router.push({
          path: '/delivered',
          query: {
            identifier: 'delivered',
          },
        });
      }
    } else {
      showToast('请先登录');
      localStorage.setItem("loginUrl", item.pach)
      router.push('/login')
    }
  }

}
const toUserCenter = () => {
  // router.push('/userCenter');
  showPopover.value = false;
  const userData = JSON.parse(localStorage.getItem("userInfo") as string);
  if (userData != null) {
    showUserCenter.value = true;
  } else {
    showToast('请先登录');
    router.push('/login')
  }
};
</script>
<style lang="less" scoped>
:deep(.van-sidebar-item) {
  padding: 5px 10px !important;
  box-sizing: border-box;
  background: #ffffff !important;
}

:deep(.van-sidebar) {
  padding: 10px 0;
}

.logo {
  img {
    height: 25px;
    margin-top: 6px;
  }
}

.icon-caidan,
.icon-guanbi,
.icon-fenxiang {
  font-size: 26px;
}

.pop-logo {
  img {
    height: 60px;
    margin-left: 15px;
  }
}

#header {
  width: 100vw;
  height: 50px;
  backdrop-filter: blur(5px);
  /* 调整数值来改变模糊程度 */
  background: rgba(0, 0, 0, 0.20);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-sizing: border-box;
  position: fixed;
  z-index: 999;
  top: 0;

  .iconfont {
    color: #ffffff;
  }

  .icon {
    font-size: 30px;
  }
}

#header.bgWhite {
  background: #ffffff;

  .iconfont {
    color: #000000;
  }

  img {
    //height: 80px;
  }

  .icon {
    color: #000000;
  }
}
</style>
